<template>
    <div>
        <!-- <keep-alive> -->
            <Detailheader></Detailheader>
        <!-- </keep-alive> -->
        <banner @click.native="toggleSwiper" :sightName="sightName" :bannerImg="bannerImg"></banner>
        <gallery :swiperList="swiperList" @closeSwiper="toggleSwiper" v-show="swiperShow"></gallery>
        <detail-list :listdata="listdata"></detail-list>
        <div style="height:18rem"></div>
    </div>
</template>

<style scoped>

</style>

<script>
import Detailheader from './components/header'
import banner from './components/banner'
import gallery from '@/common/gallery/gallery'
import detailList from './components/list'

import axios from 'axios'
export default {
    data(){
        return{
            title:"详情页",
            swiperList:[],
            swiperShow:false,
            listdata:[],   //列表数据
            bannerImg:"",
            sightName:"",
        }
    },
    methods:{
        toggleSwiper(){
            console.log(111111);
            this.swiperShow=!this.swiperShow;
        },
        getList(){
            axios.get("/static/mooc/detail.json").then((reg)=>{
                console.log(reg)
                this.listdata=reg.data.data.categoryList;
                this.swiperList=reg.data.data.gallaryImgs;
                this.bannerImg=reg.data.data.bannerImg;
                this.sightName=reg.data.data.sightName;
            })
        }
    },
    components:{
        banner,
        gallery,
        Detailheader,
        detailList
    },
    mounted(){
        this.getList();
    }
}
</script>
